<template>
  <div class="main-box" v-loading="loading">
    <div class="box-shadow basic-info">
      <span class="car-id">{{data.plateNo}}</span>
      <span class="work-id">工单号：</span>
      <span>{{data.orderNo}}</span>
      <span class="check">
        {{orderStatus}}
      </span>
    </div>
    <!-- 主要信息 -->
    <div class="info">
      <div class="box-shadow repairs ">
        <!-- 各个维修部位数据渲染 -->
        <div class="repair" v-for="(repair,index) in data.parts" :key="index">
          <div class="title" style="border-radius: 8px 8px 0 0;">
            <span class="title-text" @click="showMiddleInfo(index)">维修部位{{index + 1}}</span>
          </div>
          <div class="repair-info">
            <div class="before">
              <div class="repair-text">
                <span class="star">*</span>
                <span>维修前：</span>
              </div>
              <div class="repair-imgs">
                <!-- 维修前四张图片渲染 -->
                <div style="width: 100%;height: 100%;overflow: hidden;">
                  <div class="repair-imgs-show" v-for="(img,key) in repair.beforeImg" :key="key">
                    <!-- 默认最大显示图片数量为四张 -->
                    <el-image
                      v-if="key < 4"
                      style="width: 35px;height: 35px;"
                      :src="img"
                      :preview-src-list="repair.beforeImg"
                      fit="cover"
                    ></el-image>
                  </div>
                </div>
                <div>
                  <img 
                    @click="addImg(index,1)"
                    style="width: 90px;height: 29px;position: relative;top: -34px;left: -4px;cursor: pointer;" 
                    src="../../assets/images/orderslogo16.png" />
                </div>
              </div>
              <div
                @click="playBeforeVoice(repair)">
                <div class="repair-voice">
                  <img style="position: relative;top: 3px;" width="14" src="../../assets/images/voice.svg" />
                </div>
                <img style="position: relative;top: -32px;left: 65px;cursor: pointer;" width="22" src="../../assets/images/voice_left.svg" />
                <span class="voice-time voice-time-left">{{repair.beforeVoice.length}}</span>
              </div>
            </div>
            <div class="arrow">
              <img src="../../assets/images/arrow.svg" />
            </div>
            <div class="after">
              <div class="repair-text">
                <span class="star">*</span>
                <span>维修后：</span>
              </div>
              <div class="repair-imgs-2">
                <!-- 维修后图片数据渲染 -->
                <div style="width: 100%;height: 100%;overflow: hidden;">
                  <div class="repair-imgs-show" v-for="(img,key) in repair.afterImg" :key="key">
                    <!-- 默认最大显示图片为四张 -->
                    <el-image
                      v-if="key < 4"
                      style="width: 35px;height: 35px;"
                      :src="img"
                      :preview-src-list="repair.afterImg"
                      fit="cover"
                    ></el-image>
                  </div>
                </div>
                <div>
                  <img 
                    @click="addImg(index,2)"
                    style="width: 90px;height: 29px;position: relative;top: -34px;left: -4px;cursor: pointer;" 
                    src="../../assets/images/orderslogo16.png" />
                </div>
              </div>
              <div @click="playAfterVoice(repair)">
                <div class="repair-voice">
                  <img style="position: relative;top: 3px;" width="14px" src="../../assets/images/voice.svg" />
                </div>
                <img style="position: relative;top: -32px;left: -58px;cursor: pointer;" width="22" src="../../assets/images/voice_right.svg" />
                <span class="voice-time voice-time-right">{{repair.afterVoice.length}}</span>
              </div>
            </div>
          </div>				
          
        </div>
        <!-- 各个维修部位数据渲染 -->
        
        <!-- 播放声音弹出框 -->
        <div class="play-voice" v-if="voice">
          <div class="voice-close-1" @click="voice = !voice;play = !play;">
          </div>
          <div class="play-voice-info">
            <div>
              <div class="voice"></div>
              <table class="voices" cellspacing="8">
                <thead>
                  <tr>
                    <td class="voice-time" colspan="3"></td>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="i in fakeVoice" :key="i.name">
                    <td width="42">{{i.name}}</td>
                    <td 
                      class="voice-imgs" 
                      :width="i.time / 100 * 215 <= 95 ? 95 : i.time / 100 * 215 > 215 ? 215 : i.time / 100 * 215"
                      @click="playVoice(i.url)"
                    >
                      
                      <img width="235" src="../../assets/images/talk.svg" />
                      <img 
                        width="20" 
                        src="../../assets/images/talk_ico.svg"
                        style="position: relative;right: 225px;top: -4px;"
                      />
                      <span
                        class="time"
                      >{{i.time}}"</span>
                    </td>
                    <td
                      width="360"
                    >
                      <div
                        style="background-color: rgba(250, 140, 22, 1);width: 8px;height: 8px;border-radius: 8px;position: relative;top: -14px;"
                      ></div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <audio id="voice">
                <source src="" type="audio/mpeg">
              </audio>
            </div>
          </div>
          <div class="voice-close-2" @click="voice = !voice;play = !play;"></div>
        </div>

      </div>
      <div class="middle-info">
        <div class="middle-info-detailed box-shadow">
            {{rawContent}}
        </div>
        <!-- 表格信息 -->
        <div class="middle-table box-shadow">
          <div class="middle-table-head">
            <div class="work-hour">
              <div style="float: left;">
                工时项目
              </div>
              <div style="float: left;padding-top: 3px;margin-left: 6px;">
                <img width="20" src="../../assets/images/work_hour.svg" />
              </div>
            </div>
            <div 
              class="jieche-info" 
              @click="$router.push({path:'/main/settlement/pick_info',query:{id:id}});partShow = ! partShow"
              v-if="partShow"
              >
              <div style="float: left;">
                接车信息
              </div>
              <div style="float: left;padding-top: 2px;margin-left: 10px;">
                <img width="18" src="../../assets/images/right.svg" />
              </div>
            </div>
            <div 
              v-if="!partShow"
              class="jieche-info" 
              @click="show()"
              >
              <div style="float: left;padding-top: 2px;">
                <img 
                  style="-ms-transform: rotate(180deg);transform:rotate(180deg);" 
                  width="18" 
                  src="../../assets/images/right.svg" />
              </div>
              <div style="float: left;margin-left: 10px;">
                {{truckInfo}}
              </div>
            </div>
          </div>
          <!-- 表格 -->
          <div
            style="height: 320px;background-color: #FFFFFF;"
            >
            <el-table
              :data="middleInfo"
              max-height="280"
              :row-class-name="tableRowClass"
              :header-row-class-name="tableHead"
              :row-style="{'height':'40px'}"
            >
              <el-table-column
                label=""
                width="10"
                header-align="center"
              >
              </el-table-column>
              <el-table-column
                width="30"
                align="right"
              >
                <template>
                  <a href="javascript:">
                    <img style="margin-top: 7px;" width="19" height="20" src="../../assets/images/square.svg" />
                  </a>
                </template>
              </el-table-column>
              <el-table-column
                prop="entryName"
                label="项目名称"
                header-align="center"
              >
              </el-table-column>
              <el-table-column
                prop="hourFee"
                label="工时费"
                width="100"
                align="center"
              ></el-table-column>
              <el-table-column
                label=""
                width="50"
              >
                <template slot-scope="scope">
                  <a
                    @click="handleDelete(scope.$index,middleInfo)"
                    href="javascript:"
                  >
                    <img width="19" height="20" style="position: relative;top: 3px;" src="../../assets/images/delete.svg" />
                  </a>
                  
                </template>
              </el-table-column>
            </el-table>
            <div
              class="add"
              v-if="addInfo.flag"
            >
              <table cellspacing="0" width="100%">
                <tr
                  height="40"
                  >
                  <td><input v-model="addInfo.name" type="text" /></td>
                  <td width="100"><input v-model="addInfo.price"  type="text" /></td>
                  <td width="50">
                    <el-link 
                      :underline="false" 
                      @click="handleAdd()"
                      :disabled="addInfo.name.length == 0 || addInfo.price.length == 0"
                      >添加</el-link>
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div align="center" >
            <i style="cursor: pointer;color: rgba(250, 140, 22, 1);line-height: 40px;" class="el-icon-plus" @click="addInfo.flag = !addInfo.flag"></i>
          </div>
          <div>
            <el-button
              @click="saveItems"
              style="background-color: rgba(250, 140, 22, 1);color: white;width: 98%;margin-left: 1%;height: 47px;font-size: 18px;"
            >保存工时项目</el-button>
          </div>
        </div>
        <!-- 表格信息 -->
      </div>
      <div class="right-info">
        <router-view 
          @toTruckInfo="toTruckInfo" 
          @toBasicInfo="toBasicInfo"
          @toAllImages="toAllImages"
          :carId="data.carInfoId" 
          :data="data" 
          :id="id"
          @addWareImg="addWareImg"
          @refresh="load"></router-view>
      </div>
    </div>
    <!-- 主要信息 -->
    
    <input style="display: none;" type="file" id="file" />
  </div>
</template>

<script>
  import $ from 'jquery'
  import {getSettlementById,updateItems,uploadImg} from '@/api/workspace/work_order'
  import {uploadFile} from '@/api/workspace/uploadFile'
  // import test from './settlement/test'


  export default{

    data() {
      return {
        fakeVoice:{},
        id:0,
        voice:false,
        play:false,
        data:{},
        middleInfo:[],
        rawContent:'',
        orderStatus:'',
        addInfo:{
          flag:false,
          name:"",
          price:"",
          partId:0
        },
        partShow:true,
        truckInfo:'更换配件',
        loading:true,
        type:-1,
        index:-1,
        wareIndex:-1,
        refId:-1
      }
    },
    created() {
      this.id = this.$route.query.id
    },
    mounted() {
      this.sizeListen();
      this.load();
      this.imgUploadListen();
    },
    methods:{
      load:function(){
        
        var that = this;
        getSettlementById({settlmentId:this.id}).then(response => {
          const _data = response.data;
          console.log(_data)
          if(_data.status == 200){
            const parts = _data.data.parts;
            //处理图片数据，处理成list存回数据中
            for(let part of parts){
              var beforeImg = [];
              var afterImg = [];
              var beforeVoice = [];
              var afterVoice = [];
              for(let attach of part.attaches){
                // console.log(attach)
                if(attach.type == 1){
                  beforeImg.push(attach.url)
                } else if(attach.type == 2) {
                  afterImg.push(attach.url)
                } else if(attach.type == 3) {
                  beforeVoice.push(attach);
                } else if(attach.type == 4) {
                  afterVoice.push(attach);
                }
              }
              part.beforeImg = beforeImg;
              part.afterImg = afterImg;
              part.beforeVoice = beforeVoice;
              part.afterVoice = afterVoice;
              for(let warehouses of part.warehouses){
                var wImgs11 = [];
                var wImgs13 = [];
                var wImgs14 = [];
                for(let at of warehouses.attaches){
                  // console.log(at.url)
                  if(at.type == 11){
                    wImgs11.push(at.url)
                  }else if(at.type == 13){
                    wImgs13.push(at.url)
                  }else if(at.type == 14){
                    wImgs14.push(at.url)
                  }
                }
                warehouses.wImgs11 = wImgs11;
                warehouses.wImgs13 = wImgs13;
                warehouses.wImgs14 = wImgs14;
              }
              
            }
            
            // console.log(response.data)
            that.data = _data.data;
            var NoPic = [];
            var MilePic = [];
            NoPic.push(that.data.plateNoPic);
            NoPic.push(that.data.mileagePic);
            that.data.NoPic = NoPic;
            that.data.MilePic = MilePic;
            // console.log(that.data)
            var order = ['报修','在修','完工','审核','结算','完成结算'];
            that.orderStatus = order[_data.data.orderStatus - 1];
            that.loading = false;
          } else {
            // alert("请从工单页面进入");
            that.$message({
              message:'请从工单页面进入',
              showClose:true,
              offset:'100'
            })
            that.$router.push({path:"/main/work_order"});
          }
        }).catch(() => {
          that.$message.error('请求出错');
        })
      },
      //中间部分大小兼听，如果很小隐藏右边
      sizeListen:function(){
        var windowWidth = window.innerWidth;
        var width = windowWidth - 1060;
        if(width < 400){
          $('.right-info').hide();
          $('.middle-info').css("width",width + 370);
        }else {
          $('.right-info').show();
          $('.middle-info').css("width",width);
        }
        window.addEventListener('resize',function(){
          // var x = window.innerHeight;
          windowWidth = window.innerWidth;
          width = windowWidth - 1060;
          if(width < 400){
            $('.right-info').hide();
            $('.middle-info').css("width",width + 370);
          }else {
            $('.right-info').show();
            $('.middle-info').css("width",width);
          }
        });
      },
      playBeforeVoice:function(info){
        var data = info.beforeVoice;
        // data[0].time = 100;
        if(data.length > 0){
          this.fakeVoice = data;
          this.voice = true;
        }else {
          this.$message({
            message:'无语音内容',
            showClose:true,
          });
        }
      },
      playAfterVoice:function(info){
        var data = info.afterVoice;
        if(data.length > 0){
          this.fakeVoice = data;
          this.voice = true;
        }else {
          this.$message({
            message:'无语音内容',
            showClose:true,
          });
        }
      },
      playVoice:function(url){
        $('#voice').attr('src',url);
        if(this.play){
          $('#voice')[0].pause();
        }else {
          $('#voice')[0].play();
        }
        this.play = !this.play;
      },
      handleDelete:function(key,data){
        // console.log(key,data)
        data.splice(key,1);
      },
      handleAdd:function(){
        var id = this.addInfo.partId;
        if(id == 0){
          this.$message({
            message:"请选择维修部件",
            showClose:true,
            offset:'100'
          })
        }else {
          // console.log(id)
          this.middleInfo.push({createTime:'',entryName:this.addInfo.name,hourFee:this.addInfo.price,partId:this.addInfo.partId,id:0,sort:0});
          this.addInfo.name = '';
          this.addInfo.price = '';
          
        }

      },
      showMiddleInfo:function(index){
        var info = this.data.parts[index];
        this.rawContent = info.rawContent;
        this.middleInfo = info.items;
        this.addInfo.partId = info.id;
      },
      tableRowClass:function({rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'table-row-color';
        }
        return 'table-row-color-2';
      },
      tableHead:function(){
        return 'table-head';
      },
      show:function(){
        if(this.truckInfo == '更换配件'){
          this.$router.push({path:'/main/settlement/parts',query:{id:this.id}});
          this.partShow = ! this.partShow
        }else if(this.truckInfo == '接车信息') {
          this.$router.push({path:'/main/settlement/pick_info',query:{id:this.id}});
          this.truckInfo = '更换配件';
        }
      },
      toTruckInfo:function(){
          this.$router.push({path:'/main/settlement/truck_info',query:{id:this.id}});
          this.truckInfo = '接车信息'
      },
      toBasicInfo:function() {
        this.$router.push({path:'/main/settlement/truck_basic_info',query:{id:this.id}});
      },
      toAllImages:function() {
        this.$router.push({path:'/main/settlement/all_images',query:{id:this.id}});
      },
      saveItems:function(){
        var that = this;
        updateItems({items:that.middleInfo,partId:that.addInfo.partId,rawContent:"",singlePrice:0}).then(response => {
          var _data = response.data;
          if(_data.status == 200){
            that.$message({
              message:'保存成功',
              showClose:true,
              type:'success',
              offset:'100'
            });
            that.addInfo.flag = false;
          }else {
            that.$message({
              message:'请求错误',
              showClose:true,
              type:'error',
              offset:'100'
            });
          }
        }).catch(error => {
          alert('网络错误');
          console.log(error);
        })
        console.log(this.middleInfo);
      },
      addImg:function(id,type) {
        this.type = type;
        this.index = id;
        this.refId = this.data.parts[id].id;
        $('#file').click();
        
          
        
        // data.append('file',$('#file')[0])
        // uploadFile()
      },
      imgUploadListen:function() {
        var that = this;
        $('#file').change(function() {
          var data = new FormData();
          data.append('file',$('#file')[0].files[0]);
          data.append('type',4);
          data.append('duration','');
          uploadFile(data).then(response => {
            var _data = response.data;
            // console.log(_data);
            if(_data.status == 200) {
              that.upload(_data)
            }
          })
        })
      },
      upload:function(info) {
        var that = this;
        var part = that.data.parts[that.index];
        uploadImg({refId:that.refId,type:that.type,url:info.data.model}).then(response => {
          var _data = response.data;
          // console.log(_data);
          if(_data.code == 200) {
            var url = info.data.model;
            var ware;
            that.$message.success("添加成功");
            if(that.type == 1) {
              part.beforeImg.push(url);
            }else if(that.type == 2) {
              part.afterImg.push(url);
            }else if(that.type == 11 && that.wareIndex != 0) {
              ware = part.warehouses[that.wareIndex];
              ware.wImgs11.push(url);
            }else if(that.type == 13 && that.wareIndex != 0) {
              ware = part.warehouses[that.wareIndex];
              ware.wImgs13.push(url);
            }else if(that.type == 14 && that.wareIndex != 0) {
              ware = part.warehouses[that.wareIndex];
              ware.wImgs14.push(url);
            }
          }else {
            that.$message.error('发生错误');
          }
        })
      },
      addWareImg:function(key,index,type) {
        this.type = type;
        this.index = key;
        this.wareIndex = index;
        this.refId = this.data.parts[key].warehouses[index].id;
        $('#file').click();
      }
    }
  }
</script>

<style lang="css" scoped>
  .info {
    height: 725px;
  }
  .main-box{
    margin: 5px 11px;
  }

  .basic-info{
    white-space: nowrap;
    color: rgba(250, 140, 22, 1);
    height: 22px;
    border-radius: 5px;
    padding: 14px 12px;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 10px;
  }
  .car-id{
    display: inline-block;
    width: 100px;
    white-space: nowrap;
    
  }
  .work-id{
    margin-left: 255px;
  }
  .check{
    position: absolute;
    right: 25px;
    letter-spacing: 1em;
    cursor: pointer;
  }
  .repairs{
    /* margin-top: 10px; */
    width: 360px;
    height: 727px;
    border-radius: 8px 8px 0 0;
    overflow-y: auto;
  }
  .title{
    background-color: rgba(246, 247, 248, 1);
    font-family: PingFangSC-Medium;
    padding: 16px 16px;
  }
  .title-text{
    display: block;
    overflow-wrap: break-word;
    color: rgba(250, 140, 22, 1);
    font-size: 16px;
    font-family: PingFangSC-Medium;
    white-space: nowrap;
    line-height: 22px;
    cursor: pointer;
  }
  .repair-info{
    height: 198px;
    background-color: white;
    
  }
  .before,.arrow,.after,.repairs,.middle-info{
    float: left;
  }
  .before{
    width: 90px;
    margin-top: 7px;
    margin-left: 27px;
    text-align: center;
  }
  .star{
    color: rgba(250, 140, 22, 1);
    margin-right: 5px;
  }
  .repair-text{
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .repair-imgs{
    margin-top: 16px;
    height: 91px;
    width: 90px;
    padding: 4px;
    overflow: hidden;
    background: url("../../assets/images/imgs_box.svg")
        0px 0px no-repeat;
  }
  .repair-imgs-2{
    margin-top: 16px;
    height: 91px;
    width: 90px;
    padding: 4px;
    overflow: hidden;
    background: url("../../assets/images/imgs_box2.svg")
        0px 0px no-repeat;
  }
  .repair-imgs-show{
    width: 35px;
    height: 35px;
    float: left;
    margin: 3px;
    cursor: pointer;
    border-radius: 3px;
    overflow: hidden;
  }
  .repair-voice{
    cursor: pointer;
    height: 30px;
    border-radius: 5px;
    width: 90px;  
    /* padding-top: 5px; */
    background-color: rgba(247, 247, 247, 1);
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
  }
  .play-voice{
    width: 360px;
    height: 725px;
    border-radius: 8px 8px 0 0;
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    top:345px;
    overflow: hidden;
  }
  .voice-close-1{
    height: 190px;
  }
  .voice-close-2{
    height: 285px;
  }
  .voice-time{
    overflow-wrap: break-word;
    color: rgba(250, 140, 22, 1);
    font-size: 12px;
    font-family: PingFangSC-Medium;
    white-space: nowrap;
  }
  .voice-time-left{
    position: relative;
    top:-53px;
    left: 70px;
  }
  .voice-time-right{
    position: relative;
    top:-53px;
    left: -91px;
  }
  .time{
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-family: PingFangSC-Medium;
    position: relative;
    top: -12px;
    left: -215px;
  }
  .play-voice-info{
    height: 252px;
    /* width: 343px; */
    
    padding: 0px 8px;
  }
  .play-voice-info>div{
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 1);
    height: 100%;
    padding: 8px 14px 16px 16px;
    overflow-y: auto;
  }
  .voice{

  }
  .voices {
    width: 100%;
  }
  .voices tr{
    width: 100%;
  }
  .voices tbody td{
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
    white-space: nowrap;
  }
  .voices tr .voice-imgs{
    display: block;
    height: 35px;
    line-height: 35px;
    overflow: hidden;
    /* width: 100px; */
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
  }
  .voice-time{
    text-align: center;
  }
  .voice-time{
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 0.5);
    font-size: 12px;
  }
  .arrow{
    width: 123px;
    padding-top: 65px;
  }
  .after {
    text-align: center;
    width: 90px;
    height: 100%;
    margin-top: 7px;
  }
  .middle-info{
    /* width: 860px; */
    margin-left: 10px;
  }
  .work-hour{
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 16px;
    font-family: PingFangSC-Medium;
    white-space: nowrap;
    height: 22px;
    display: inline-block;
  }
  .jieche-info{
    float: right;
    overflow-wrap: break-word;
    color: rgba(250, 140, 22, 1);
    font-size: 14px;
    white-space: nowrap;
    height: 22px;
    display: inline-block;
    cursor: pointer;
  }
  .middle-table-head{
    height: 22px;
    padding: 16px 28px;
    line-height: 22px;
  }
  .middle-info-detailed{
    height: 231px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 1);
    
    padding: 6px 11px;  
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 16px;
    line-height: 22px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .middle-table{
    height: 470px;
    margin-top: 10px;
    border-radius: 8px;
    padding: 2px;
  }
  .add {
    height: 40px;
  }
  .add table {
    border-collapse: collapse;
    border: none;
  }
  .add td {
    border: 1px solid black;
  }
  .add input {
    border: none;
    width: 100%;
    text-indent: 10px;
    font-size: 14px;
    height: 40px;
    outline: medium;
  }
  .right-info{
    width: 360px;
    float: right;
    height: 725px;

  }

</style>
